<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="//static.soufunimg.com/common_m/pc_public/imgcropping/css/tailoring.css"/>
    <!-- <link rel="stylesheet" href="static/css/tailoring.css" /> -->
    <title></title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        height: 100%;
    }

    body {
        background: skyblue;
        height: 100%;
        position: relative;
    }

    a {
        text-decoration: none;
    }

    .imgcropmain {
        /* text-align: center; */
    }

    .button {
        width: 100px;
        line-height: 26px;
        text-align: center;
        font-weight: 700;
        color: #fff;
        text-shadow: 1px 1px 1px #333;
        border-radius: 5px;
        margin: 10px 20px;
        position: relative;
        overflow: visible;
        outline: none;
    }

    .button.blue {
        position: relative;
        border: 1px solid #1e7db9;
        box-shadow: 0 1px 2px #8fcaee inset, 0 -1px 0 #497897 inset, 0 -2px 3px #8fcaee inset;
        background: -webkit-linear-gradient(top, #42a4e0, #2e88c0);
        background: -moz-linear-gradient(top, #42a4e0, #2e88c0);
        background: linear-gradient(top, #42a4e0, #2e88c0);
    }

    .blue.rarrow:after {
        box-shadow: 0 1px 0 #8FCAEE inset, -1px 0 0 #497897 inset, -2px 0 0 #8FCAEE inset;
        background: -webkit-linear-gradient(top left, #42A4E0, #2E88C0);
        background: -moz-linear-gradient(top left, #42A4E0, #2E88C0);
        background: linear-gradient(top left, #42A4E0, #2E88C0);
    }

    .blue.rarrow:before {
        background: #1E7DB9;
    }

    .rarrow:after {
        right: -12px;
    }

    .rarrow:before {
        right: -13px;
    }

    .larrow:after,
    .larrow:before,
    .rarrow:after,
    .rarrow:before {
        position: absolute;
        content: "";
        display: block;
        width: 28px;
        height: 28px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .upload-file {
        opacity: 0;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    #previewResult {
        background: #fff;
        max-width: 260px;
        border: 1px solid #000;
        display: block;
        margin: 0 auto;
    }

    .input-online {
        width: 200px;
        line-height: 20px;
    }

    </style>
</head>

<body>
    <div class="imgcropmain">
        <div>
            <button class="button blue" id="imgOnlineBtn">使用线上图片</button>
            <input class="input-online" id="imgOnlineInput" type="text" value="http://tan.fang.com/imgcropping/dev/images/test2.jpg">
        </div>
        <button id='fileChooseButton' class="button blue file-input-mask">上传图片
            <input class="upload-file" type="file" id="file" accept="image/*" />
        </button>
        <img id="previewResult" style="display: none" />
    </div>
</body>
<script src="//static.test.soufunimg.com/common_m/pc_public/fangjs/build/??fang2.3.2.js,jquery/jquery-3.js"></script>
<script>

var tailor;
if (window.fang) {
    fang.config({
        base: location.href.indexOf('activities') > -1 ? '//static.soufunimg.com/common_m/pc_public/imgcropping/js' : '//tan.fang.com/imgcropping/static/js',
        //ver: Date.now()
    });
    fang.use('tailoring2.0', function(Tailoring) {
        tailor = new Tailoring();
    });
} else {
    tailor = new Tailoring();
}

$('#fileChooseButton').on('click', function() {
    $('#previewResult').hide();
    tailor.config({
        cropWidth: 200,
        cropHeight: 300,
        ratio: 3,
        bindFile: '#file',
        type: 'inputfile',
        callback: function(base64) {
            $('#previewResult').attr('src', base64).show();
        }
    });
});

var imgInput = $('#imgOnlineInput');
/* imgInput.on('focus', function() {
    $(this).val('');
}); */

$('#imgOnlineBtn').on('click', function() {
    $('#previewResult').hide();
    var imgUrl = imgInput.val();
    if (!imgUrl) return;
    tailor.config({
        cropWidth: 200,
        cropHeight: 300,
        ratio: 3,
        type: 'imgsrc',
        bindFile: imgUrl,
        callback: function(base64) {
            $('#previewResult').attr('src', base64).show();
        }
    });
});

</script>

</html>
